@extends('layouts.head')

@section('title', 'Photohub 相册')

@section('styles')
    <style>
        .album-form {
            display: none;
            position: fixed;
            margin-top: 10px;
            box-shadow: 1px 2px 3px #aaaaaa;
            border-radius: 5px;
        }

        .albums .album {
            float: left;
            width: 160px;
            height: 160px;
            margin-left: 10px;
            margin-top: 10px;
            padding: 5px;
            border-radius: 3px;
            box-shadow: 2px 2px 3px #aaaaaa;
            background: white;
            overflow: hidden;
        }

        .albums .album img {
            border-radius: 3px;
            width: 100%;
            height: 130px;
        }

        .albums .album p {
            width: 100%;
            height: 30px;
            padding: 3px;
            text-align: center;
        }

        .float-right {
            float: right;
        }

        .pointer {
            cursor: pointer;
        }
    </style>
@endsection

@section('content')

    <button class="btn" onclick="showAlbum()"><span class="glyphicon glyphicon-plus"></span></button>

    <div class="album-form panel panel-default">
        <div class="panel-heading">创建相册<span onclick="closeAlbum()"
                                             class="pointer glyphicon glyphicon-remove float-right"></span></div>
        <div class="panel-body">
            <form class="form-group">
                <div class="form-group">
                    <input class="form-control" type="text" name="name" placeholder="相册名称">
                </div>
                <div class="form-group">
                    <input class="form-control" type="text" name="brief" placeholder="描述">
                </div>
                <div class="form-group">
                    <input type="file" name="cover">
                </div>
                <input type="hidden" name="user_id" value="{{ auth()->user()->id }}">
                <div class="form-group float-right">
                    <button class="btn-sm btn-primary" type="submit">创建相册</button>
                    <button style="margin-left: 5px" onclick="closeAlbum()" class="btn-sm btn-warning" type="button">
                        取消
                    </button>
                </div>
            </form>
        </div>
    </div>

    <div class="albums" style="clear: both">
        @foreach($albums as $album)
            <div class="album">
                <img class="album-cover" src="{{ $album->cover }}">
                <p class="album-text">{{ $album->name }}</p>
            </div>
        @endforeach
    </div>
    <p style="clear: both;"></p>

    <div>sads</div>
@endsection

@section('scripts')
    <script>
        function showAlbum() {
            $('.album-form').fadeIn();
        }

        $('.form-group').submit(function () {
            var formData = new FormData();
            formData.append('name', $("input[name=name]").val());
            formData.append('brief', $("input[name=brief]").val());
            formData.append('user_id', $("input[name=user_id]").val());
            formData.append('cover', $("input[name=cover]")[0].files[0]);
            $.ajax({
                url: "/album",
                type: 'POST',
                cache: false,
                data: formData,
                processData: false,
                contentType: false,
                success: function (data) {
                    console.log(111);
//                    var album = data.parseJSON(data);
//                    $('.albums').append(
//                        '<div class="album">' +
//                        ' <img class="album-cover" src="' + album.cover + '">' +
//                        ' <p class="album-text">' + album.name + '</p>' +
//                        '</div>'
//                    );
                }
            });
        });

        function closeAlbum() {
            $('.album-form').fadeOut();
        }
    </script>
@endsection